iT邦幫忙

0

23 : 搜尋與篩選任務

  • 分享至 

  • xImage
  •  
  1. 新增搜尋欄位
    • 使用者可以在搜尋框輸入關鍵字來快速找到特定任務
    • 搜尋時即時過濾列表中的待辦項目

  2. 篩選已完成與未完成任務
    • 提供「全部/未完成/已完成」篩選按鈕
    • 幫助使用者更快管理任務狀態

  3. 保留原有分類標籤與優先權顏色
    • 搜尋或篩選不會改變任務的標籤(個人/工作/學習/健康)
    • 高、中、低優先權仍顯示相應顏色

// 搜尋欄位
TextField(
  controller: _searchController,
  decoration: InputDecoration(
    hintText: '搜尋任務...',
    prefixIcon: Icon(Icons.search),
  ),
  onChanged: (value) {
    setState(() {
      _searchQuery = value; // 即時更新搜尋文字
    });
  },
),

// 篩選按鈕
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    FilterChip(
      label: Text('全部'),
      selected: _filterStatus == null,
      onSelected: (_) {
        setState(() {
          _filterStatus = null;
        });
      },
    ),
    FilterChip(
      label: Text('未完成'),
      selected: _filterStatus == false,
      onSelected: (_) {
        setState(() {
          _filterStatus = false;
        });
      },
    ),
    FilterChip(
      label: Text('已完成'),
      selected: _filterStatus == true,
      onSelected: (_) {
        setState(() {
          _filterStatus = true;
        });
      },
    ),
  ],
),

// 列表顯示
ListView(
  children: _todoList.where((item) {
    final matchesSearch = _searchQuery.isEmpty || item.title.contains(_searchQuery);
    final matchesFilter = _filterStatus == null || item.isDone == _filterStatus;
    return matchesSearch && matchesFilter;
  }).map((item) => ToDoItemWidget(item: item)).toList(),
),

https://ithelp.ithome.com.tw/upload/images/20251015/20178900QqYPFbY0kF.png


圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言